<template>
  <div class="button-page">
    <div class="button-item">
      <ibo-button type="gray">提交</ibo-button>
      <br />
      <ibo-button type="light-gray"></ibo-button>
    </div>
    <div class="button-item">
      <ibo-button type="blue"></ibo-button>
      <br />
      <ibo-button type="light-blue"></ibo-button>
    </div>
    <div class="button-item">
      <ibo-button type="yellow"></ibo-button>
      <br />
      <ibo-button type="light-yellow"></ibo-button>
    </div>

    <div class="button-item">
      <ibo-button type="pink"></ibo-button>
      <br />
      <ibo-button type="light-pink"></ibo-button>
    </div>
    <div class="button-item">
      <ibo-button type="green"></ibo-button>
      <br />
      <ibo-button type="light-green"></ibo-button>
    </div>

    <div class="button-item">
      <ibo-button type="orange"></ibo-button>
      <br />
      <ibo-button type="light-orange"></ibo-button>
    </div>

  </div>
</template>

<script>
export default {
  name: 'ButtonPage',
};
</script>

<style lang="scss" scoped>
.button-page {
  width: 1200px;
  min-height: 500px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  .button-item {
    width: 100px;
    text-align: center;
  }
}
</style>
